/**
 * 添加用户弹出框 （查看，修改，添加）
 */
import React from 'react';
import { connect } from 'umi';
import { Modal, message, Button, Table, Tag, Space } from 'antd';

@connect(({ memberList, user }) => ({
  memberList,
  user,
}))
export default class extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    allAddUserId: [],
  };
  // 添加成员
  addWorkspaceUser = async () => {
    const {getMemberList} = this.props.parentThis; 
    const { workSpaceId } = this.props.memberList;
    const { allAddUserId } = this.state;
    let obj = {
      workspaceId: workSpaceId,
      userIds: allAddUserId,
    };
    let rs = await this.props.dispatch({
      type: 'memberList/addWorkspaceUser',
      payload: obj,
    });
    if (rs.success) {
      this.setState({ selectContent: [] });
      message.success('添加成功');
      this.setState({
        selectedRowKeys: [],
        allAddUserId: [],
      });
      // 调用父级方法
      getMemberList;
      this.onClose()
    }
    if (!rs.success) {
      message.error(rs.subMsg);
    }
  };
  //被添加成员id
  addUserId = () => {
    const { allMember } = this.props.memberList;
    const { selectedRowKeys } = this.state;
    let arr = selectedRowKeys.map(val => {
      return allMember[val].id;
    });
    this.setState({
      allAddUserId: arr,
    });
  };
  // table每次选中改变
  onSelectChange = selectedRowKeys => {
    this.setState({ selectedRowKeys }, () => {
      this.addUserId();
    });
  };

  //关闭弹窗
  onClose = () => {
    this.props.dispatch({
      type: 'memberList/setState',
      payload: { addVisible: false },
    });
  };

  // table渲染
  renderTableData = (item, i) => {
    var roleVolist = item.roleVoList;
    return {
      key: i,
      1: item.username,
      2: item.name,
      3: roleVolist?.map((item, ind) => (
        <Tag  key={ind} style={{ marginTop: '4px',border:"1px solid #00A0AB",color:"#00A0AB" }}>
          {item.roleName}
        </Tag>
      )),
      4: item.telNum,
      5: item.email,
    };
  };

  render() {
    const { addVisible, allMember, workSpaceId } = this.props.memberList;
    const columns = [
      { title: '用户名', dataIndex: '1' },
      { title: '姓名', dataIndex: '2' },
      { title: '角色', dataIndex: '3' },
      { title: '电话', dataIndex: '4' },
      { title: '邮箱', dataIndex: '5' },
    ];

    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      <Modal
        title="添加成员"
        width="800px"
        onCancel={this.onClose}
        visible={addVisible}
        destroyOnClose={true}
        centered={true}
        footer={null}
      >
        {
          <div>
            <div style={{ marginBottom: 16 ,display:'flex',justifyContent:'right',alignItems:'center'}}>
              <span style={{ marginRight: 8 }}>
                {hasSelected ? `已经选中 ${selectedRowKeys.length} 条` : ''}
              </span>
              <Button
                type="primary"
                onClick={this.addWorkspaceUser}
                disabled={!hasSelected}
                // loading={loading}
              >
                确认添加
              </Button>
            </div>
            <Table
              rowSelection={rowSelection}
              pagination={false}
              columns={columns}
              scroll={{ y: '500px' }}
              dataSource={allMember.map((item, i) =>
                this.renderTableData(item, i),
              )}
            />
          </div>
        }
      </Modal>
    );
  }
}
